<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Animate a point</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet' />
    <link rel="stylesheet" href="./css/p-ol3.min.css">
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        #menu{
            position: absolute;
            top: 80px;
            left: 10px;
            background: rgba(100, 100, 100, 0.85);
            padding: 10px;
            color: #cccccc;
        }
        #delete-wrapper{
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            padding-bottom: 8px;
        }

        #delete-wrapper #btn-delete{
            padding: 8px 16px;
            display: inline-block;
            color: #fff;
            cursor: pointer;
            background: rgba(255, 8, 53, 0.85);
        }

    </style>
</head>
<body onload="init()">

<div id='map'></div>
<div id="menu">
    <div>
        点标
        <button type="button" onclick="activate(P.PlotTypes.MARKER)">点</button>
    </div>
    <div>
        线标
        <button type="button" onclick="activate(P.PlotTypes.ARC)">弧线</button>
        <button type="button" onclick="activate(P.PlotTypes.CURVE)">曲线</button>
        <button type="button" onclick="activate(P.PlotTypes.POLYLINE)">折线</button>
        <button type="button" onclick="activate(P.PlotTypes.FREEHAND_LINE)">自由线</button>
    </div>
    <div>
        面标
        <button type="button" onclick="activate(P.PlotTypes.CIRCLE)">圆</button>
        <button type="button" onclick="activate(P.PlotTypes.ELLIPSE)">椭圆</button>
        <button type="button" onclick="activate(P.PlotTypes.LUNE)">弓形</button>
        <button type="button" onclick="activate(P.PlotTypes.SECTOR)">扇形</button>
        <button type="button" onclick="activate(P.PlotTypes.CLOSED_CURVE)">曲线面</button>
        <button type="button" onclick="activate(P.PlotTypes.POLYGON)">多边形</button>
        <button type="button" onclick="activate(P.PlotTypes.RECTANGLE)">矩形</button>
        <button type="button" onclick="activate(P.PlotTypes.FREEHAND_POLYGON)">自由面</button>
        <button type="button" onclick="activate(P.PlotTypes.GATHERING_PLACE)">聚集地</button>
    </div>
    <div>
        箭头
        <button type="button" onclick="activate(P.PlotTypes.DOUBLE_ARROW)">钳击</button>
        <button type="button" onclick="activate(P.PlotTypes.STRAIGHT_ARROW)">直箭头</button>
        <button type="button" onclick="activate(P.PlotTypes.FINE_ARROW)">细直箭头</button>
        <button type="button" onclick="activate(P.PlotTypes.ASSAULT_DIRECTION)">突击方向</button>
        <button type="button" onclick="activate(P.PlotTypes.ATTACK_ARROW)">进攻方向</button>
        <button type="button" onclick="activate(P.PlotTypes.TAILED_ATTACK_ARROW)">进攻方向（尾）</button>
        <button type="button" onclick="activate(P.PlotTypes.SQUAD_COMBAT)">分队战斗行动</button>
        <button type="button" onclick="activate(P.PlotTypes.TAILED_SQUAD_COMBAT)">分队战斗行动（尾）</button>
    </div>
</div>
<div id="delete-wrapper">
    <div id="btn-delete" style="display:none;">删 除</div>
</div>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
<!--<script src='./js/ol.js'></script>-->
<script src='./js/p-mapbox.min.js'></script>
<script>
    var  map ,plotDraw, plotEdit;
    var initTempFeature = {
        "type": "geojson",
        'data':{
            'type':'FeatureCollection',
            "features":[]
        }
    }
    var initFeature =  {
        "type": "geojson",
        'data':{
            'type':'FeatureCollection',
            "features":[]
        }
    }
    mapboxgl.accessToken = 'pk.eyJ1IjoiamVyY2t5IiwiYSI6ImNqYjI5dWp3dzI1Y2YzMnM3eG0xNnV3bWsifQ.eQp4goc9Ng8SuEZcdgNJ_g';
    function init() {
         map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [0, 0],
            zoom: 2
        });

        map.on('load',function () {

            map.addSource('viewLayerTempSource',initTempFeature)

            map.addLayer({
                'id':'view-temp-fill-layer',
                'type':'fill',
                'source':'viewLayerTempSource',
                'paint':{
                    'fill-color': '#2E8CFF',
                    'fill-opacity': 0.8
                },
                "filter": ["==", "$type", "Polygon"]
            })
            map.addLayer({
                'id':'view-temp-line-layer',
                'type':'line',
                'source':'viewLayerTempSource',
                'paint':{
                    "line-color": "#2E8CFF",
                    "line-width": 4,
                },
                'filter':['==','$type','LineString']
            })


            map.addSource('viewLayerSource',initFeature)
            map.addLayer({
                'id':'view-fill-layer',
                'type':'fill',
                'source':'viewLayerSource',
                'paint':{
                    'fill-color': '#088',
                    'fill-opacity': 0.8
                },
                "filter": ["==", "$type", "Polygon"]
            })
            map.addLayer({
                'id':'view-point-layer',
                'type':'circle',
                'source':'viewLayerSource',
                'paint':{
                    'circle-radius':5,
                    'circle-color':"#088"
                },
                'filter':['==','$type','Point']
            })
            map.addLayer({
                'id':'view-line-layer',
                'type':'line',
                'source':'viewLayerSource',
                'paint':{
                    "line-color": "#088",
                    "line-width": 4,
                },
                'filter':['==','$type','LineString']
            })

            map.on('click', (e)=> {
                const feature =  map.queryRenderedFeatures(e.point,{ layers: ['view-fill-layer','view-line-layer','view-point-layer'] })
                console.log(feature)
                if(feature.length){
                    plotEdit.activate(feature[0])
                }else{
                    plotEdit.deactivate()
                }
            })

        })

        plotDraw = new P.PlotDraw(map);
        plotDraw.on(P.Event.PlotDrawEvent.DRAW_END, onDrawEnd, false, this);
        plotDraw.on(P.Event.PlotDrawEvent.DRAW_MOVING,onDrawMove,false,this)
        plotEdit = new P.PlotEdit(map,mapboxgl);
        plotEdit.on(P.Event.PlotEditEvent.DRAG_POINT_MOVING,onDragPointMove,false,this)
        plotEdit.on(P.Event.PlotEditEvent.DRAG_POINT_END,onDragPointEnd,false,this)

    }

    function onDragPointEnd(event) {
        initFeature.data.features = []
        initFeature.data.features.push(event.feature)
        map.getSource('viewLayerSource').setData(initFeature.data)
    }

    function onDragPointMove(event) {
        initFeature.data.features = []
        initFeature.data.features.push(event.feature)
        map.getSource('viewLayerSource').setData(initFeature.data)
    }
    function activate(type){
        // plotEdit.deactivate();
        plotDraw.activate(type);
    };
    function onDrawMove(event) {
        initTempFeature.data.features = []
        initTempFeature.data.features.push(event.feature)
        map.getSource('viewLayerTempSource').setData(initTempFeature.data)
    }
    function onDrawEnd(event){
        initTempFeature.data.features = []
        map.getSource('viewLayerTempSource').setData(initTempFeature.data)

        console.log(event)
        initFeature.data.features.push(event.feature)
        console.log(initFeature)
        map.getSource('viewLayerSource').setData(initFeature.data)
        // drawOverlay.getSource().addFeature(feature);
        // 开始编辑
        // plotEdit.activate(feature);
        // activeDelBtn();
    }
    // var radius = 20;

    // function pointOnCircle(angle) {
    //     return {
    //         "type": "Point",
    //         "coordinates": [
    //             Math.cos(angle) * radius,
    //             Math.sin(angle) * radius
    //         ]
    //     };
    // }
    //
    // map.on('load', function () {
    //     // Add a source and layer displaying a point which will be animated in a circle.
    //     map.addSource('point', {
    //         "type": "geojson",
    //         "data": pointOnCircle(0)
    //     });
    //
    //     map.addLayer({
    //         "id": "point",
    //         "source": "point",
    //         "type": "circle",
    //         "paint": {
    //             "circle-radius": 10,
    //             "circle-color": "#007cbf"
    //         }
    //     });
    //
    //     setTimeout(()=>{
    //         map.getSource('point').setData({
    //             "geometry": {}
    //         })
    //     },2000)
    //     // function animateMarker(timestamp) {
    //     //     // Update the data to a new position based on the animation timestamp. The
    //     //     // divisor in the expression `timestamp / 1000` controls the animation speed.
    //     //     map.getSource('point').setData(pointOnCircle(timestamp / 1000));
    //     //
    //     //     // Request the next frame of the animation.
    //     //     requestAnimationFrame(animateMarker);
    //     // }
    //     //
    //     // // Start the animation.
    //     // animateMarker(0);
    // });
</script>

</body>
</html>